<template>
  <div >
	  <ul class="AlphabetList">
		  <li v-for='item of alphabetList' :key='item.id' @click='alphabetListBtnClick' ref='myLi'>{{item.content}}</li>
		  <div class="showName" ref='clickShow'>
		  		  {{myContent}}
		  </div>
	  </ul>
  </div>
</template>

<script>
export default {
  name: 'locationAlphabet',
  props:{
	  alphabetList:Array,
  },
  data(){
  	  return{
			myContent:''
  	  }
  },
  methods:{
  	 alphabetListBtnClick(e){//右边导航点击跳转
		 this.myContent=e.target.innerText
		 let myClick= this.$refs.clickShow
		 myClick.style.display='block'
		 let LiHeight=(this.$refs.myLi[0].offsetHeight)/50
		 for(let i=0;i<this.alphabetList.length;i++){
			 if(this.myContent==this.alphabetList[i].content){
				 let distance=(i*LiHeight-0.1)
				 myClick.style.top=distance+'rem'
			 }
		 }
		 setTimeout(()=>{
			 this.$refs.clickShow.style.display='none'
		 },200)
		 this.$emit('clickAlphabet',this.myContent)
	 }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.AlphabetList
	position:fixed
	top:1.4rem
	right:0
	height:90%
	background:rgba(242,244,247,.7)
	width:10%
	text-align:center
	z-index:20
	.showName
		position: absolute;
		right: 100%;
		top: 0.12rem;
		background: rgba(80,180,0,.7);
		line-height: .3rem;
		font-size: .3rem;
		color: #fff;
		border-radius: .05333333rem;
		text-align: center;
		white-space: nowrap;
		padding: .06rem .1rem;
		display: none;
.AlphabetList>li
	font-weight:400
	color:#50b400
	height:3.5%
	white-space: nowrap;
</style>
